
<div class="root{{if active}} root-toggle{{/if}}">
    {{if active}}
    <div class="player">
        {{set animPaused=buffer||!song.picture||!play}}
        <span class="player-btn r180{{if !undo}} player-btn-disabled{{/if}}" mx-click="{{=undo}}?@:{pre.song}()" title="{{=ptip}}">
            <svg viewBox="0 0 1024 1024"><path d="M660.823 334.436H641.59c-9.072 0-16.402 7.33-16.402 16.403v132.6c-1.887-1.523-3.92-3.047-6.242-4.426L393.37 339.299c-25.548-15.822-46.45-4.21-46.45 25.91v293.582c0 30.047 20.684 41.297 45.942 25.04l226.663-146.392c2.033-1.306 3.92-2.758 5.662-4.21v139.424c0 9.073 7.33 16.403 16.402 16.403h19.233c9.073 0 16.403-7.331 16.403-16.403V350.839c0-9.073-7.331-16.403-16.403-16.403z" fill="#fff"/></svg>
        </span>
        <div class="channel-info-img{{if animPaused}} anim-paused{{/if}}{{if reset}} anim-reset{{/if}}" mx-click="{{=!buffer&&song.picture}}?@:{update.status}()" style="{{=song.picture}}??background-image:url({{=song.picture}})">
            <div class="channel-info-img-hole"></div>
        </div>
        <span class="player-btn" mx-click="@:{next.song}()" title="{{=ntip}}">
            <svg viewBox="0 0 1024 1024"><path d="M660.823 334.436H641.59c-9.072 0-16.402 7.33-16.402 16.403v132.6c-1.887-1.523-3.92-3.047-6.242-4.426L393.37 339.299c-25.548-15.822-46.45-4.21-46.45 25.91v293.582c0 30.047 20.684 41.297 45.942 25.04l226.663-146.392c2.033-1.306 3.92-2.758 5.662-4.21v139.424c0 9.073 7.33 16.403 16.402 16.403h19.233c9.073 0 16.403-7.331 16.403-16.403V350.839c0-9.073-7.331-16.403-16.403-16.403z" fill="#fff"/></svg>
        </span>
        <span class="player-btn" mx-click="@:{update.mode}()" title="正在{{if mode=='rdm'}}随机播放{{else}}单曲循环{{/if}}">
            {{if mode=='rdm'}}
            <svg viewBox="0 0 1024 1024"><path d="M229.555 408.457h103.542c5.192 0 20.672 5.192 25.863 10.382l36.245 36.245c10.382 15.573 31.054 15.573 46.534 0 15.573-10.382 15.573-31.053 0-46.534l-36.245-36.245c-15.48-15.48-46.534-31.053-72.489-31.053h-103.45c-20.671 0-31.053 15.573-31.053 31.053 0 20.579 15.573 36.152 31.053 36.152z" fill="#fff"/><path d="M617.771 408.457h56.916v41.436c0 10.382 5.191 15.573 15.573 10.382l119.023-77.588c10.382-5.191 10.382-15.573 0-20.671L690.26 284.428c-10.382-5.191-15.573 0-15.573 10.382v56.824h-56.916c-51.725 0-62.106 25.863-98.351 62.106L400.397 584.303c-20.672 20.671-82.779 41.435-113.833 41.435h-56.916c-20.671 0-31.053 15.48-31.053 31.054 0 20.671 15.48 31.053 31.053 31.053h56.916c51.725 0 124.215-25.863 160.459-62.106L566.046 454.99c25.863-25.863 20.672-46.534 51.725-46.534z" fill="#fff"/><path d="M809.283 646.503L690.26 563.725c-10.382-5.191-15.573 0-15.573 10.382v51.725h-56.916c-5.191 0-20.671-5.19-25.863-10.382l-36.245-36.244c-10.382-15.574-31.053-15.574-46.534 0-15.48 10.382-15.48 31.053 0 46.534l36.245 36.244c15.574 15.48 46.534 31.054 72.49 31.054h56.915v41.436c0 10.382 5.192 15.48 15.574 10.382l119.023-77.588c10.196-5.191 10.196-15.573-.093-20.764z" fill="#fff"/></svg>
            {{else}}
            <svg viewBox="0 0 1024 1024"><path fill="#fff" d="M841.8 513.1c0 .1 0 .1 0 0 0 106.1-86 192.1-192 192.1H393.7c-106 0-192-86-192-192s86-192 192-192h309.8v77.1l186.8-107.8-186.8-107.9v74H392.7c-141.4 0-256.1 114.6-256.1 256.1 0 141.4 114.6 256.1 256.1 256.1h256c141.3 0 255.9-114.4 256.1-255.7h-63z"/><path fill="#fff" d="M542.7 626.5V388h-10.1c-4.1 3.6-9 7.2-14.6 11-5.6 3.7-11.6 7.3-18 10.7-6.3 3.4-12.8 6.5-19.4 9.3-6.6 2.8-12.8 5-18.6 6.6v27c5.2-1.3 10.5-3.1 16-5.4 5.5-2.3 10.7-4.7 15.6-7.3 4.9-2.6 9.4-5.2 13.3-7.9 4-2.7 7-5 9-7.1v201.6h26.8z"/></svg>
            {{/if}}
        </span>
        <div class="scroll-title" title="{{=song.title}}&lt;{{=song.artist}}&gt;">
            <div class="marquee-left{{if animPaused}} anim-paused{{/if}}{{if reset}} anim-reset{{/if}}">
                <div class="scroll-content">
                    {{=song.title}}&lt;{{=song.artist}}&gt;&emsp;&emsp;&emsp;&emsp;
                </div>
                <div class="scroll-content">
                    {{=song.title}}&lt;{{=song.artist}}&gt;&emsp;&emsp;&emsp;&emsp;
                </div>
            </div>
            {{set tip}}
            {{if error}}
                {{tip=error}}
            {{else if !play&&!buffer}}
                {{tip='点击光盘开始播放'}}
            {{else if buffer}}
                {{tip='正在缓冲...'}}
            {{/if}}
            {{if tip}}
            <span class="player-tip">{{=tip}}</span>
            {{/if}}
        </div>
        <mx-vframe src="./time" class="player-progress"/>
        <span class="player-btn" mx-click="@:{toggle.channels}()" title="当前分类：{{=active.name}}">
            <svg viewBox="0 0 1024 1024"><path fill="#fff" d="M343.25 512h-112.5c-61.875 0-112.5 50.625-112.5 112.5V737c0 61.875 50.625 112.5 112.5 112.5h112.5c61.875 0 112.5-50.625 112.5-112.5V624.5c0-61.875-50.625-112.5-112.5-112.5zm56.25 225c0 30.938-25.313 56.25-56.25 56.25h-112.5c-30.938 0-56.25-25.313-56.25-56.25V624.5c0-30.938 25.313-56.25 56.25-56.25h112.5c30.938 0 56.25 25.313 56.25 56.25V737zM737 118.25H624.5c-61.875 0-112.5 50.625-112.5 112.5v112.5c0 61.875 50.625 112.5 112.5 112.5H737c61.875 0 112.5-50.625 112.5-112.5v-112.5c0-61.875-50.625-112.5-112.5-112.5zm56.25 225c0 30.938-25.313 56.25-56.25 56.25H624.5c-30.938 0-56.25-25.313-56.25-56.25v-112.5c0-30.938 25.313-56.25 56.25-56.25H737c30.938 0 56.25 25.313 56.25 56.25v112.5zM737 512H624.5C562.625 512 512 562.625 512 624.5V737c0 61.875 50.625 112.5 112.5 112.5H737c61.875 0 112.5-50.625 112.5-112.5V624.5c0-61.875-50.625-112.5-112.5-112.5zm56.25 225c0 30.938-25.313 56.25-56.25 56.25H624.5c-30.938 0-56.25-25.313-56.25-56.25V624.5c0-30.938 25.313-56.25 56.25-56.25H737c30.938 0 56.25 25.313 56.25 56.25V737zm-450-618.75h-112.5c-61.875 0-112.5 50.625-112.5 112.5v112.5c0 61.875 50.625 112.5 112.5 112.5h112.5c61.875 0 112.5-50.625 112.5-112.5v-112.5c0-61.875-50.625-112.5-112.5-112.5zm56.25 225c0 30.938-25.313 56.25-56.25 56.25h-112.5c-30.938 0-56.25-25.313-56.25-56.25v-112.5c0-30.938 25.313-56.25 56.25-56.25h112.5c30.938 0 56.25 25.313 56.25 56.25v112.5z"/></svg>
        </span>
        <!-- <mx-vframe src="./volume" class="player-v"/> -->
    </div>
    <mx-vframe src="./lyric" class="player-lyric" mx-mousedown="@:{move.lyric}()"/>
    {{/if}}
    <mx-vframe src="./channels"
        class="channels-root scrollable{{if active&&!cshow}} channels-toggle{{/if}}"
        mx-change="@:{update.channel}()"/>
</div>